<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心愿清单 - 发现大家的愿望</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 页面头部 */
        .page-header {
            padding: 2rem 0;
            text-align: center;
            margin-bottom: 2rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 12px;
            margin-top: 1rem;
        }
        
        .page-title {
            font-weight: 700;
            margin-bottom: 0.75rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .page-description {
            max-width: 700px;
            margin: 0 auto;
            opacity: 0.9;
        }
        
        /* 分类标题 */
        .section-title {
            font-weight: 600;
            margin: 2.5rem 0 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #764ba2;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            color: #4a4a4a;
        }
        
        .section-title i {
            color: #764ba2;
        }
        
        /* 视图切换和筛选 */
        .view-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
            cursor: pointer;
            color: #6c757d;
            transition: all 0.2s;
        }
        
        .view-btn.active {
            background-color: #764ba2;
            color: white;
            border-color: #764ba2;
        }
        
        .filter-controls {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .filter-select {
            min-width: 150px;
        }
        
        /* 许愿卡片基础样式 */
        .wish-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
            height: 100%;
            border: 1px solid #f0f0f0;
        }
        
        .wish-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0,0,0,0.1);
        }
        
        /* 内容容器 */
        .wish-content {
            display: flex;
            flex-direction: column;
        }
        
        /* 媒体容器 - 支持有图和无图 */
        .wish-media {
            position: relative;
            width: 100%;
            min-height: 200px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        /* 无图片状态 */
        .no-media {
            color: #b19cd9;
            text-align: center;
            padding: 2rem;
        }
        
        .no-media i {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            opacity: 0.7;
        }
        
        /* 有图片的网格布局 */
        .media-grid {
            display: grid;
            width: 100%;
            height: 100%;
            min-height: 200px;
            gap: 3px;
        }
        
        .one-photo {
            grid-template-columns: 1fr;
        }
        
        .two-photos {
            grid-template-columns: 1fr 1fr;
        }
        
        .three-photos {
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        
        .three-photos img:first-child {
            grid-column: 1;
            grid-row: 1 / 3;
        }
        
        .four-photos {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        
        .wish-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .wish-card:hover .wish-media img {
            transform: scale(1.05);
        }
        
        /* 许愿信息 */
        .wish-info {
            padding: 1.25rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        /* 许愿类型标签 */
        .wish-type {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            margin-bottom: 0.75rem;
        }
        
        .type-material {
            background-color: #e0f7fa;
            color: #00695c;
        }
        
        .type-experience {
            background-color: #f3e5f5;
            color: #6a1b9a;
        }
        
        .type-relationship {
            background-color: #ffebee;
            color: #c62828;
        }
        
        .type-achievement {
            background-color: #fff8e1;
            color: #ff8f00;
        }
        
        /* 标题和描述 */
        .wish-title {
            font-weight: 600;
            font-size: 1.25rem;
            color: #2d3436;
            margin-bottom: 0.75rem;
            transition: color 0.3s;
        }
        
        .wish-card:hover .wish-title {
            color: #764ba2;
        }
        
        .wish-description {
            color: #636e72;
            font-size: 0.95rem;
            margin-bottom: 1rem;
            flex: 1;
            line-height: 1.6;
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #f1f1f1;
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #f1f1f1;
        }
        
        .author-details {
            flex: 1;
        }
        
        .author-name {
            font-weight: 500;
            color: #2d3436;
            margin-bottom: 0;
            font-size: 0.95rem;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: #b2bec3;
        }
        
        /* 统计和操作按钮 */
        .wish-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            color: #636e72;
            padding-top: 0.75rem;
            border-top: 1px solid #f1f1f1;
        }
        
        .action-stats {
            display: flex;
            gap: 1.25rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .stat-item i {
            font-size: 0.9rem;
        }
        
        .wish-interactions {
            display: flex;
            gap: 0.75rem;
        }
        
        .interaction-btn {
            background: none;
            border: none;
            color: #636e72;
            cursor: pointer;
            transition: all 0.2s;
            padding: 0.35rem 0.65rem;
            border-radius: 6px;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .interaction-btn:hover {
            background-color: #f1f1f1;
        }
        
        .like-btn:hover, .like-btn.active {
            color: #e91e63;
        }
        
        .save-btn:hover, .save-btn.active {
            color: #764ba2;
        }
        
        .comment-btn:hover {
            color: #2196f3;
        }
        
        /* 热门许愿样式 */
        .featured-wish {
            display: flex;
            flex-direction: row;
        }
        
        .featured-wish .wish-media {
            width: 40%;
            min-height: 280px;
        }
        
        .featured-wish .media-grid {
            min-height: 280px;
        }
        
        .featured-wish .wish-info {
            width: 60%;
            padding: 1.75rem;
        }
        
        .featured-wish .wish-title {
            font-size: 1.65rem;
            margin-bottom: 1rem;
        }
        
        .featured-wish .wish-description {
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .featured-wish .interaction-btn {
            font-size: 1rem;
            padding: 0.5rem 1rem;
        }
        
        /* 列表视图样式 */
        .list-view .wish-card {
            display: flex;
            flex-direction: row;
            height: auto;
        }
        
        .list-view .wish-media {
            width: 30%;
            min-height: 200px;
        }
        
        .list-view .wish-info {
            width: 70%;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .featured-wish {
                flex-direction: column;
            }
            
            .featured-wish .wish-media,
            .featured-wish .wish-info {
                width: 100%;
            }
            
            .featured-wish .media-grid {
                min-height: 220px;
            }
        }
        
        @media (max-width: 768px) {
            .list-view .wish-card {
                flex-direction: column;
            }
            
            .list-view .wish-media,
            .list-view .wish-info {
                width: 100%;
            }
            
            .filter-controls {
                width: 100%;
            }
            
            .filter-select {
                flex: 1;
                min-width: auto;
            }
        }
        
        @media (max-width: 576px) {
            .page-title {
                font-size: 1.75rem;
            }
            
            .wish-media {
                min-height: 160px;
            }
            
            .featured-wish .media-grid {
                min-height: 180px;
            }
            
            .wish-actions {
                flex-wrap: wrap;
                gap: 0.75rem;
            }
            
            .wish-interactions {
                margin-top: 0.5rem;
                width: 100%;
                justify-content: flex-end;
            }
            
            .action-stats {
                width: 100%;
            }
        }
        
        /* 动画效果 */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 发布新愿望按钮 */
        .post-wish-btn {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 1000;
        }
        
        .post-wish-btn:hover {
            transform: scale(1.1) rotate(90deg);
            box-shadow: 0 6px 20px rgba(118, 75, 162, 0.5);
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">心愿清单</h1>
            <p class="page-description">分享你的愿望，见证梦想成真的时刻。在这里，每一个愿望都值得被看见和祝福。</p>
        </div>
        
        <!-- 热门许愿 -->
        <section>
            <h2 class="section-title">
                <i class="fas fa-fire-alt"></i> 热门愿望
            </h2>
            
            <div class="wish-card featured-wish fade-in">
                <div class="wish-media">
                    <div class="media-grid three-photos">
                        <img src="https://picsum.photos/800/800?random=1" alt="徒步旅行装备和风景">
                        <img src="https://picsum.photos/400/400?random=2" alt="山顶日出景观">
                        <img src="https://picsum.photos/400/400?random=3" alt="旅行背包细节">
                    </div>
                </div>
                
                <div class="wish-info">
                    <span class="wish-type type-experience">体验类</span>
                    <h3 class="wish-title">希望完成环青海湖徒步旅行，寻找同行伙伴</h3>
                    
                    <p class="wish-description">
                        一直梦想着能在青海湖完成一次徒步旅行，感受高原的壮美与纯净。计划明年夏季出发，全程约100公里，分5-6天完成。希望能找到2-3位有户外经验的同伴一起，互相照应。目前已准备部分装备，但还需要一个专业的户外帐篷和睡袋。如果有人愿意赞助装备或提供旅行建议，将非常感激！
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=101" alt="用户头像" class="author-avatar">
                        <div class="author-details">
                            <p class="author-name">李小野 - 户外爱好者</p>
                            <div class="post-time">发布于 1个月前 · 已认证</div>
                        </div>
                    </div>
                    
                    <div class="wish-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>12.5k 浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>328 评论</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>2.7k 点赞</span>
                            </div>
                        </div>
                        <div class="wish-interactions">
                            <button class="interaction-btn like-btn active">
                                <i class="fas fa-heart"></i> 点赞
                            </button>
                            <button class="interaction-btn save-btn">
                                <i class="far fa-bookmark"></i> 收藏
                            </button>
                            <button class="interaction-btn comment-btn">
                                <i class="far fa-comment"></i> 评论
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 最新许愿 -->
        <section>
            <h2 class="section-title">
                <i class="fas fa-clock"></i> 最新愿望
            </h2>
            
            <div class="view-controls">
                <div class="view-options">
                    <button class="view-btn active" data-view="grid">
                        <i class="fas fa-th"></i> 网格
                    </button>
                    <button class="view-btn" data-view="list">
                        <i class="fas fa-list"></i> 列表
                    </button>
                </div>
                
                <div class="filter-controls">
                    <select class="form-select filter-select">
                        <option value="all">所有类型</option>
                        <option value="material">物品类</option>
                        <option value="experience">体验类</option>
                        <option value="relationship">人际类</option>
                        <option value="achievement">成就类</option>
                    </select>
                    
                    <select class="form-select filter-select">
                        <option value="latest">最新发布</option>
                        <option value="popular">热门程度</option>
                        <option value="mostLiked">点赞最多</option>
                    </select>
                </div>
            </div>
            
            <div class="row" id="wish-container">
                <!-- 有1张图片的愿望 -->
                <div class="col-lg-4 col-md-6 fade-in">
                    <div class="wish-card">
                        <div class="wish-content">
                            <div class="wish-media">
                                <div class="media-grid one-photo">
                                    <img src="https://picsum.photos/600/600?random=10" alt="手工吉他照片">
                                </div>
                            </div>
                            
                            <div class="wish-info">
                                <span class="wish-type type-material">物品类</span>
                                <h3 class="wish-title">希望拥有一把手工木吉他，重拾音乐爱好</h3>
                                
                                <p class="wish-description">
                                    大学时曾弹吉他，工作后就搁置了。最近想重新拾起这个爱好，希望能有一把音质不错的手工木吉他，预算有限，希望能找到性价比高的选择。
                                </p>
                                
                                <div class="author-info">
                                    <img src="https://picsum.photos/200/200?random=102" alt="用户头像" class="author-avatar">
                                    <div class="author-details">
                                        <p class="author-name">王音乐</p>
                                        <div class="post-time">发布于 2小时前</div>
                                    </div>
                                </div>
                                
                                <div class="wish-actions">
                                    <div class="action-stats">
                                        <div class="stat-item">
                                            <i class="far fa-eye"></i>
                                            <span>248 浏览</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-comment"></i>
                                            <span>12 评论</span>
                                        </div>
                                    </div>
                                    <div class="wish-interactions">
                                        <button class="interaction-btn like-btn">
                                            <i class="far fa-heart"></i> 32
                                        </button>
                                        <button class="interaction-btn save-btn">
                                            <i class="far fa-bookmark"></i> 收藏
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无图片的愿望 -->
                <div class="col-lg-4 col-md-6 fade-in">
                    <div class="wish-card">
                        <div class="wish-content">
                            <div class="wish-media">
                                <div class="no-media">
                                    <i class="fas fa-users"></i>
                                    <div>寻找志同道合的朋友</div>
                                </div>
                            </div>
                            
                            <div class="wish-info">
                                <span class="wish-type type-relationship">人际类</span>
                                <h3 class="wish-title">新搬到这座城市，希望认识更多喜欢读书的朋友</h3>
                                
                                <p class="wish-description">
                                    上个月刚搬到这个城市工作，身边朋友不多。平时喜欢读历史和科幻类书籍，希望能找到志同道合的朋友，周末可以一起参加读书会或咖啡馆小聚。
                                </p>
                                
                                <div class="author-info">
                                    <img src="https://picsum.photos/200/200?random=103" alt="用户头像" class="author-avatar">
                                    <div class="author-details">
                                        <p class="author-name">张书虫</p>
                                        <div class="post-time">发布于 昨天</div>
                                    </div>
                                </div>
                                
                                <div class="wish-actions">
                                    <div class="action-stats">
                                        <div class="stat-item">
                                            <i class="far fa-eye"></i>
                                            <span>876 浏览</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-comment"></i>
                                            <span>45 评论</span>
                                        </div>
                                    </div>
                                    <div class="wish-interactions">
                                        <button class="interaction-btn like-btn">
                                            <i class="far fa-heart"></i> 128
                                        </button>
                                        <button class="interaction-btn save-btn">
                                            <i class="far fa-bookmark"></i> 收藏
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 有4张图片的愿望 -->
                <div class="col-lg-4 col-md-6 fade-in">
                    <div class="wish-card">
                        <div class="wish-content">
                            <div class="wish-media">
                                <div class="media-grid four-photos">
                                    <img src="https://picsum.photos/600/600?random=11" alt="厨房改造参考图1">
                                    <img src="https://picsum.photos/600/600?random=12" alt="厨房改造参考图2">
                                    <img src="https://picsum.photos/600/600?random=13" alt="厨房改造参考图3">
                                    <img src="https://picsum.photos/600/600?random=14" alt="厨房改造参考图4">
                                </div>
                            </div>
                            
                            <div class="wish-info">
                                <span class="wish-type type-achievement">成就类</span>
                                <h3 class="wish-title">希望在年底前完成厨房改造，学习烘焙技能</h3>
                                
                                <p class="wish-description">
                                    一直想把家里的旧厨房改造一下，换成开放式设计，然后系统学习烘焙。目前正在收集装修灵感，希望有经验的朋友能给些建议，特别是关于小户型厨房的布局。
                                </p>
                                
                                <div class="author-info">
                                    <img src="https://picsum.photos/200/200?random=104" alt="用户头像" class="author-avatar">
                                    <div class="author-details">
                                        <p class="author-name">陈小厨</p>
                                        <div class="post-time">发布于 3天前</div>
                                    </div>
                                </div>
                                
                                <div class="wish-actions">
                                    <div class="action-stats">
                                        <div class="stat-item">
                                            <i class="far fa-eye"></i>
                                            <span>1.2k 浏览</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-comment"></i>
                                            <span>67 评论</span>
                                        </div>
                                    </div>
                                    <div class="wish-interactions">
                                        <button class="interaction-btn like-btn">
                                            <i class="far fa-heart"></i> 215
                                        </button>
                                        <button class="interaction-btn save-btn">
                                            <i class="far fa-bookmark"></i> 收藏
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 有2张图片的愿望 -->
                <div class="col-lg-4 col-md-6 fade-in">
                    <div class="wish-card">
                        <div class="wish-content">
                            <div class="wish-media">
                                <div class="media-grid two-photos">
                                    <img src="https://picsum.photos/600/600?random=15" alt="流浪猫照片1">
                                    <img src="https://picsum.photos/600/600?random=16" alt="流浪猫照片2">
                                </div>
                            </div>
                            
                            <div class="wish-info">
                                <span class="wish-type type-relationship">人际类</span>
                                <h3 class="wish-title">希望为小区的流浪猫建一个温暖的猫窝，寻找志愿者</h3>
                                
                                <p class="wish-description">
                                    小区里有几只流浪猫，冬天快到了，想为它们搭建几个保暖的猫窝。需要一些木板、防水布等材料，也希望有爱心的邻居能一起参与制作和安置。
                                </p>
                                
                                <div class="author-info">
                                    <img src="https://picsum.photos/200/200?random=105" alt="用户头像" class="author-avatar">
                                    <div class="author-details">
                                        <p class="author-name">林爱心</p>
                                        <div class="post-time">发布于 5天前</div>
                                    </div>
                                </div>
                                
                                <div class="wish-actions">
                                    <div class="action-stats">
                                        <div class="stat-item">
                                            <i class="far fa-eye"></i>
                                            <span>3.5k 浏览</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-comment"></i>
                                            <span>124 评论</span>
                                        </div>
                                    </div>
                                    <div class="wish-interactions">
                                        <button class="interaction-btn like-btn">
                                            <i class="far fa-heart"></i> 876
                                        </button>
                                        <button class="interaction-btn save-btn">
                                            <i class="far fa-bookmark"></i> 收藏
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无图片的愿望 -->
                <div class="col-lg-4 col-md-6 fade-in">
                    <div class="wish-card">
                        <div class="wish-content">
                            <div class="wish-media">
                                <div class="no-media">
                                    <i class="fas fa-language"></i>
                                    <div>语言学习目标</div>
                                </div>
                            </div>
                            
                            <div class="wish-info">
                                <span class="wish-type type-achievement">成就类</span>
                                <h3 class="wish-title">希望在明年3月前通过日语N2考试，寻找学习伙伴</h3>
                                
                                <p class="wish-description">
                                    学习日语已有半年，计划明年3月参加N2考试。希望能找到同样备考的学习伙伴，一起练习听力和口语，互相督促，共同进步。
                                </p>
                                
                                <div class="author-info">
                                    <img src="https://picsum.photos/200/200?random=106" alt="用户头像" class="author-avatar">
                                    <div class="author-details">
                                        <p class="author-name">赵日语</p>
                                        <div class="post-time">发布于 1周前</div>
                                    </div>
                                </div>
                                
                                <div class="wish-actions">
                                    <div class="action-stats">
                                        <div class="stat-item">
                                            <i class="far fa-eye"></i>
                                            <span>2.1k 浏览</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-comment"></i>
                                            <span>89 评论</span>
                                        </div>
                                    </div>
                                    <div class="wish-interactions">
                                        <button class="interaction-btn like-btn">
                                            <i class="far fa-heart"></i> 452
                                        </button>
                                        <button class="interaction-btn save-btn">
                                            <i class="far fa-bookmark"></i> 收藏
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 有1张图片的愿望 -->
                <div class="col-lg-4 col-md-6 fade-in">
                    <div class="wish-card">
                        <div class="wish-content">
                            <div class="wish-media">
                                <div class="media-grid one-photo">
                                    <img src="https://picsum.photos/600/600?random=17" alt="旧相机照片">
                                </div>
                            </div>
                            
                            <div class="wish-info">
                                <span class="wish-type type-material">物品类</span>
                                <h3 class="wish-title">寻找一台二手胶片相机，开始学习胶片摄影</h3>
                                
                                <p class="wish-description">
                                    最近对胶片摄影产生了浓厚兴趣，希望能找到一台性价比高的二手胶片相机，比如佳能AE-1或尼康FM2。如果有摄影爱好者愿意指导入门，那就更好了。
                                </p>
                                
                                <div class="author-info">
                                    <img src="https://picsum.photos/200/200?random=107" alt="用户头像" class="author-avatar">
                                    <div class="author-details">
                                        <p class="author-name">孙摄影</p>
                                        <div class="post-time">发布于 10天前</div>
                                    </div>
                                </div>
                                
                                <div class="wish-actions">
                                    <div class="action-stats">
                                        <div class="stat-item">
                                            <i class="far fa-eye"></i>
                                            <span>1.8k 浏览</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-comment"></i>
                                            <span>56 评论</span>
                                        </div>
                                    </div>
                                    <div class="wish-interactions">
                                        <button class="interaction-btn like-btn">
                                            <i class="far fa-heart"></i> 324
                                        </button>
                                        <button class="interaction-btn save-btn">
                                            <i class="far fa-bookmark"></i> 收藏
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多按钮 -->
            <div class="text-center mt-4 mb-5">
                <button class="btn btn-outline-primary px-5 py-2">
                    <i class="fas fa-spinner fa-spin" style="display: none;"></i>
                    <span>加载更多愿望</span>
                </button>
            </div>
        </section>
    </div>
    
    <!-- 发布新愿望按钮 -->
    <button class="post-wish-btn">
        <i class="fas fa-plus"></i>
    </button>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 视图切换功能
            const viewButtons = document.querySelectorAll('.view-btn');
            const wishContainer = document.getElementById('wish-container');
            
            viewButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 更新按钮状态
                    viewButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    
                    const viewType = this.getAttribute('data-view');
                    
                    if (viewType === 'list') {
                        wishContainer.classList.add('list-view');
                    } else {
                        wishContainer.classList.remove('list-view');
                    }
                });
            });
            
            // 滚动显示动画
            const fadeElements = document.querySelectorAll('.fade-in');
            
            const fadeInObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        // 为了让动画有层次感，添加延迟
                        const delay = Array.from(fadeElements).indexOf(entry.target) * 100;
                        setTimeout(() => {
                            entry.target.classList.add('visible');
                        }, delay);
                        fadeInObserver.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            fadeElements.forEach(element => {
                fadeInObserver.observe(element);
            });
            
            // 加载更多按钮
            const loadMoreBtn = document.querySelector('.text-center .btn');
            loadMoreBtn.addEventListener('click', function() {
                const spinner = this.querySelector('.fa-spinner');
                const text = this.querySelector('span');
                
                // 显示加载状态
                spinner.style.display = 'inline-block';
                text.textContent = '加载中...';
                this.disabled = true;
                
                // 模拟加载延迟
                setTimeout(() => {
                    spinner.style.display = 'none';
                    text.textContent = '加载更多愿望';
                    this.disabled = false;
                    
                    // 这里可以添加实际加载更多内容的逻辑
                    alert('已加载全部愿望');
                }, 1500);
            });
            
            // 点赞按钮交互
            const likeButtons = document.querySelectorAll('.like-btn');
            likeButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.classList.toggle('active');
                    
                    const icon = this.querySelector('i');
                    if (this.classList.contains('active')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        
                        // 更新点赞数
                        if (this.textContent.includes(' ')) {
                            let count = parseInt(this.textContent.trim().split(' ')[1]);
                            this.innerHTML = `<i class="fas fa-heart"></i> ${count + 1}`;
                        }
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        
                        // 更新点赞数
                        if (this.textContent.includes(' ')) {
                            let count = parseInt(this.textContent.trim().split(' ')[1]);
                            this.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
                        }
                    }
                });
            });
            
            // 收藏按钮交互
            const saveButtons = document.querySelectorAll('.save-btn');
            saveButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.classList.toggle('active');
                    
                    const icon = this.querySelector('i');
                    if (this.classList.contains('active')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                });
            });
            
            // 评论按钮交互
            const commentButtons = document.querySelectorAll('.comment-btn');
            commentButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const wishTitle = this.closest('.wish-card').querySelector('.wish-title').textContent;
                    alert(`查看 "${wishTitle}" 的评论区`);
                });
            });
            
            // 许愿卡片点击事件 - 查看详情
            const wishCards = document.querySelectorAll('.wish-card');
            wishCards.forEach(card => {
                card.addEventListener('click', function() {
                    const wishTitle = this.querySelector('.wish-title').textContent;
                    alert(`查看愿望详情: ${wishTitle}`);
                    // 实际应用中这里会跳转到详情页
                });
            });
            
            // 发布新愿望按钮
            const postWishBtn = document.querySelector('.post-wish-btn');
            postWishBtn.addEventListener('click', function() {
                alert('打开发布新愿望的表单');
                // 实际应用中这里会打开发布表单
            });
        });
    </script>
</body>
</html>
    
